<template>
	<view class="roc-cascader">
		<uni-data-picker v-model="newValue" popup-title="请选择" :map="{
				text: item.props.props.label || 'label',
				value: item.props.props.value || 'value'
			}" :localdata="columns" :placeholder="item.props.placeholder || '请选择'" :readonly="item.props.disabled || false"
			:clear-icon="item.props.clearable || true" @change="cascaderChange"></uni-data-picker>
	</view>
</template>

<script>
	import {
		apiapi
	} from '@/api/request.js';

	import {
		getList
	} from '@/api/dataAccess.js'
	export default {
		name: 'roc-cascader',
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			formData: {
				type: Object,
				default () {
					return {};
				}
			},
			value: {
				type: [String,Array],
				default () {
					return [];
				}
			}
		},
		data() {
			return {
				cascaderShow: false,
				newValue: [],
				columns: [],
				watchNum: 0
			};
		},
		watch: {
			value(newVal) {
				if (typeof newVal == "string") {
					newVal = newVal.split(",")
				}
				this.newValue = newVal.map(item => {
					return String(item)
				});
			}
		},
		async created() {
			if (this.item.props.options == undefined) {
				console.log(this.item.title, "=====================>", this.item, this.item.props.relationField, this
					.item.effect
					.fetch.action)
				// 接口数据
				if (
					this.item.effect.fetch != '' &&
					this.item.effect.fetch.action != undefined &&
					this.item.effect.fetch.action != ''
				) {
					if (!this.item.props.relationField) {
						const {
							data: {
								data
							}
						} = await apiapi(this.item.effect.fetch.action, 'POST', {});
						this.columns = data;
					} else {
						
						const [
							linkFieldNotSubtable,
							linkFieldNotSubtableCascader,
							linkFieldHaveSubtable,
							linkFieldHaveSubtableCascader,
						] = this.item.props.relationField.split(";")
						const [cascaderTableName, cascaderField] = linkFieldNotSubtableCascader.split(',')
						const [curTabField, searchField] = linkFieldNotSubtable.split(',')
						const [subTableName, subTableField] = linkFieldHaveSubtableCascader.split(',')
						if (
							linkFieldNotSubtable &&
							linkFieldNotSubtableCascader &&
							!linkFieldHaveSubtable &&
							linkFieldHaveSubtableCascader
						) {
							/*
							            有子表 有级联情况
							          */
							this.$watch(`formData.${curTabField}`, (val) => {
								if (this.watchNum) {
									this.formData[this.item.field] = []
								}
								this.watchNum++
								this.columns = [];
								if (val) {
									let param = {
										code: subTableName,
										search: JSON.stringify({
											"fid": val
										}),
										page: 1,
										page_size: 999999
									}
									getList(param).then(res => {
										let list = res.data.data.list
										// 下一步筛选条件的值
										let subTableFieldValues = list.map((subDataItem) => {
											return subDataItem[subTableField]
										})
										let searchParam = JSON.stringify({
											[cascaderTableName]: JSON.stringify({
												[cascaderField]: subTableFieldValues
													.join('|')
											})
										})
										apiapi(this.item.effect.fetch.action + "&search=" +
											searchParam, 'GET', {}).then(data => {
											this.columns = data.data.data
										});
									})
								}
							})

						} else if (linkFieldNotSubtable &&
							linkFieldNotSubtableCascader &&
							!linkFieldHaveSubtable &&
							!linkFieldHaveSubtableCascader) {
							/*
					 	             无子表 有级联情况
							           */
							this.$watch(`formData.${curTabField}`, (val) => {
								console.error("改变", this.item)
								if (this.watchNum) {
									this.formData[this.item.field] = []
								}
								this.watchNum++
								this.columns = [];
								let searchParam = {
									[cascaderTableName]: JSON.stringify({
										[cascaderField]: val,
									}),
								}
								apiapi(this.item.effect.fetch.action + "&search=" + JSON.stringify(
									searchParam), 'POST', {}).then(data => {
									this.columns = data.data.data
								});
								// 
							})
						}

					}

				} else {
					this.$u.toast(`${this.item.title}, 配置错误`);
				}
			} else {
				// 静态数据
				this.columns = this.item.props.options;
			}
		},
		methods: {
			cascaderChange(e) {
				const valueArr = e.detail.value;
				console.log(valueArr.map(item => item.value))
				this.$emit('input', valueArr.map(item => item.value));
			}
		}
	};
</script>

<style lang="scss">
	.roc-cascader {
		width: 100%;

		.input-value-border {
			border: none !important;
		}
	}
</style>
